/**
 * Clase que permite llamar a highchart en un modal
 * @author Mauricio Chamorro <mrchamorro@utn.edu.ec>
 */
$(function() {
    /**
     * Creacion del chart
     */
    chart = new Highcharts.Chart({
        width: 'inherit',
        chart: {
            renderTo: 'reportsModalBody',
//            type: 'column', // tipo de gráfica
            borderWidth: 0, // ancho del borde de la gráfica
             zoomType: "xy",
        },
        title: {
            text: 'Composición Nutricional', // título
        },
        xAxis: {
            labels: {
                rotation: -45,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }},
            gridLineWidth: 1,
            lineColor: '#000',
            tickColor: '#000',
            categories: [] // categorías
        },
        yAxis: {
            allowDecimals: true,
            title: {
                text: 'Cantidad' // nombre del eje de Y
            },
        },
        tooltip: {
            crosshairs: true,
//            pointFormat: 'Cantidad: <b>{point.y:.1f}</b>',

            shared: true,
        },
        plotOptions: {
            column: {
                dataLabels: {
                    align: 'left',
                    enabled: true,
                    rotation: -90,
                    borderRadius: 3,
                    backgroundColor: 'rgba(252, 255, 197, 0.7)',
                    borderWidth: 0.5,
                    borderColor: 'black',
                    style: {
                        fontSize: '10px',
                        fontFamily: 'Arial, sans-serif',
                    },
                    y: -50,
                },
            },
            line: {
                dataLabels: {
                    enabled: false
                }
            }
        },
        series: []
    });

});


/**
 * Permite realizar el llamado al controlador para luego proceder a crear la grafica y la tabla de menus
 * @author Mauricio Chamorro 
 * @param {int} id
 */
var booleanActivoChart = false;
function loadGrafica(id) {
    $("#mainModal").css('width', '800px');
    $("#mainModal").css('margin-left', '-400px');
    $('#dataModalBody').children('table').remove();
    $('#reportsModalBody').children('div').remove();

    $.ajax({
        beforeSend: function() {
            verCargandoDatosModal();
        },
        type: "Post", //GET or POST or PUT or DELETE verb
        url: baseUrl + 'carta/cartaAlimentos/verValoresNutricionalesMenu',
        data: {id: id}, //Data sent to server
        dataType: "json"})
            .success(function(data) {//On Successful service call
                console.log(data);
                var html = "";
                $("#titleModal").html("<h3>" + data.header + "</h3>")

                $("#dataModalBody").html(html);
                var tableBody = '';
                tableBody += '<table class="items table table-striped table-bordered table-hover table-advance">   <tr><th>Variantes Menú</th><th>Nombre</th><th>Medida</th><th>Cantidad</th></tr>';
                $.each(data.body.menu, function(key, value) {
                    tableBody += '<tr><td>' + value[0] + '</td> <td>' + value[1] + '</td><td>' + value[2] + '</td><td>' + value[3] + '</td></tr>';
                });
                tableBody += "</table>";
                $("#dataModalBody").append(tableBody);
                if (booleanActivoChart) {
                    chart.series[2].remove(false);
                    chart.series[1].remove(false);
                    chart.series[0].remove(false);
                }
                $("#mainModal").attr("loading", "false");
                chart.xAxis[0].setCategories(data.body.report.xAxis.categories, false);
                chart.addSeries(data.body.report.series[0], false);
                chart.addSeries(data.body.report.series[1], true);
                chart.addSeries(data.body.report.series[2], false);
//                chart.yAxis[0].update({max: (data.body.report.value.max + (data.body.report.value.max) / 1.1)});
//                chart.series[0].chart.options.plotOptions.bar.dataLabels.y = -data.body.report.value.min;
                chart.setTitle(null, {text: "Menú: " + data.header});
                booleanActivoChart = true;
                chart.redraw();
                $("#mainModal").modal("show");
            })
            .
            error(function(xhr) {//On Successful service call
                openModal("mainModal", xhr.status + " " + xhr.statusText, xhr.responseText);
            }
            ).complete(function() {
//                chart.redraw();
        $(window).resize();
    });


}
